<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="module">
	import {createElement} from "./ReactHandler.js";
	
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	const  str = "什么是幸福？幸福就是我没有认真听课，后来发现其它认真听课的同学也没听懂这就是幸福！";
	const num = 1;
	const num2 = 2;
	const obj = {
		color:"red",
		fontSize:16
	}
	// 虚拟DOM对象是一个JS对象
	// {
	//     $$typeof:Symbol(react.element),
	//     key:"two"
	//     props:{
	//          className:"one",
	//          children: [
	//              {
	//                  type:"p",
	//                  $$typeof:Symbol(react.element),
	//                  key:null,
	//                  props:{style:{color:'red},fontSize:16,children:str},
	//                  ref:null
	//              },
	//              {
	//                  type:"p",
	//                  $$typeof:Symbol(react.element),
	//                  key:null,
	//                  props:{style:{color:'red},fontSize:16,children:num},
	//                  ref:null
	//              },
	//              {
	//                  type:"p",
	//                  $$typeof:Symbol(react.element),
	//                  key:null,
	//                  props:{style:{color:'red},fontSize:16,children:num1},
	//                  ref:null
	//              }
	//          ]
	//     }
	//     ref:null
	//     type:"div"
	// }
	// console.log(React.createElement("h1"))
	console.log(
		createElement(
			"div",
			{className:"one",key:"two"},
			createElement(
				"p",
				{
					style: obj
				},
				str
			),
			createElement(
				"p",
				null,
				num
			),
			createElement(
				"p",
				null,
				num2
			))
	)
</script>
</html>